<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        #revolver{
            top: 0;
            bottom:0;
            left: 0;
            right: 0;
            
            margin: auto;
            position: absolute;
            list-style: none;
            height: 200px;
            width: 800px;
            padding: 0;
        }
        li:hover{
            cursor:pointer;
        }
        li{
            position: absolute;
            left: 0;
            transition-duration: 0.3s;
            float: left;
        }
    </style>
    <script>
        window.onload = function(){
            let timer = setInterval(get_pre,3000)
            var ul = document.getElementById("revolver")
            let pic = []
            for(var i  = 1;i<=5;i++){
                var pic_li = document.createElement("li")
                var picsrc = document.createElement("img")
                picsrc.src = 'static/'+i+".png"
                picsrc.style.width="400px"
                picsrc.style.height='200px'
                pic_li.appendChild(picsrc)
                ul.appendChild(pic_li)
                pic.push(pic_li)
            }
            pic[pic.length-3].style.left=0
            pic[pic.length-2].style.zIndex=100
            pic[pic.length-2].style.left="200px"
            pic[pic.length-2].style.transform="scale(1.5)"
            pic[pic.length-1].style.left="400px"
            function get_next(){
                let pop = pic.pop()
                pic.unshift(pop)
                for(var i in pic){
                    pic[i].style.zIndex=i
                    pic[i].style.transform = "scale(1)"
                }
                pic[pic.length-3].style.left=0
            pic[pic.length-2].style.zIndex=100
            pic[pic.length-2].style.left="200px"
            pic[pic.length-2].style.transform="scale(1.5)"
            pic[pic.length-1].style.left="400px"
            }
            function get_pre(){
                var push  =pic.shift()
                pic.push(push)
                for(var i in pic){
                    pic[i].style.zIndex=i
                    pic[i].style.transform = "scale(1)"
                }
                pic[pic.length-3].style.left=0
            pic[pic.length-2].style.zIndex=100
            pic[pic.length-2].style.left="200px"
            pic[pic.length-2].style.transform="scale(1.5)"
            pic[pic.length-1].style.left="400px"
            }
        }
    </script>
</head>

<body>
    <ul id="revolver">
    </ul>
</body>

</html>